<template>
  <div class="container" ref="mainCon">
    <div class="topCon boxBorder">
      <div class="topTitle">
        <h2>
          {{ titleText }}
        </h2>
        <span class="dateShow">更新时间：{{ dataStr }}</span>
      </div>
    </div>
    <div class="mainCon">
      <div class="reminderBox" v-if="roleHandle">
        <ul class="reminder">
          <li>
            <span>1</span>
            <el-tooltip content="Top center" placement="top" effect="dark">
              <div slot="content">
                企业因未落实条例要求，系统会自动
                <br />产生预警，并通知企业
              </div>
              <div id="heightBox">
                企业因未落实条例要求，系统会自动产生预警，并通知企业
              </div>
            </el-tooltip>
          </li>
          <li class="arrowRight">
            <img src="../../../static/img/icon2.png" alt="" />
          </li>
          <li>
            <span>2</span>
            <div>根据企业处理预警的实际情况，酌情添加处罚痕迹</div>
          </li>
          <li class="arrowRight">
            <img src="../../../static/img/icon2.png" alt="" />
          </li>
          <li>
            <span>3</span>
            <div>
              系统根据企业处理结果自动消除预警
              <el-tooltip content="Top center" placement="top" effect="dark">
                <div slot="content">
                  如部分预警企业线下处理，无法在系统中体现，
                  <br />可根据企业提供的相关凭证，由监管方手动消除预警。
                </div>
                <i class="icon iconfont iconhuabanfuben"></i>
              </el-tooltip>
            </div>
          </li>
        </ul>
      </div>
      <div class="reminderBox" v-if="!roleHandle">
        <ul class="reminder">
          <li>
            <span>1</span>
            <div id="heightBox">
              企业因未落实条例要求，系统会自动产生预警，并通知企业
            </div>
          </li>
          <li class="arrowRight">
            <img src="../../../static/img/icon2.png" alt="" />
          </li>
          <li>
            <span>2</span>
            <div>根据企业处理情况添加处置记录</div>
          </li>
          <li class="arrowRight">
            <img src="../../../static/img/icon2.png" alt="" />
          </li>
          <li>
            <span>3</span>
            <div>
              系统根据企业处理结果自动消除预警
              <el-tooltip content="Top center" placement="top" effect="dark">
                <div slot="content">
                  如部分预警企业已线下处理，无法在系统中体现，<br />可根据企业提供的相关凭证手动消除预警
                </div>
                <i class="icon iconfont iconhuabanfuben"></i>
              </el-tooltip>
            </div>
          </li>
        </ul>
      </div>
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                placeholder="请填写项目完整名称"
                @blur="filterField.projectName = changeValue($event)"
                clearable
                v-model="filterField.projectName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6" v-show="roleHandle">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
                :append-to-body="false"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <template v-if="roleHandle">
            <template v-if="advanced">
              <el-col :lg="8" :xl="6" v-show="roleHandle">
                <el-form-item label="行业" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.industryId"
                    filterable
                    placeholder="请选择"
                    clearable
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in industryOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="预警类型" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.typeId"
                    clearable
                    filterable
                    placeholder="请选择"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="开工状态" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.projectStatus"
                    filterable
                    placeholder="请选择"
                    clearable
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>
          </template>
          <template v-else>
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业" class="row-padding-bottom">
                <el-select
                  v-model="filterField.industryId"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="advanced">
              <el-col :lg="8" :xl="6">
                <el-form-item label="预警类型" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.typeId"
                    clearable
                    filterable
                    placeholder="请选择"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="开工状态" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.projectStatus"
                    filterable
                    placeholder="请选择"
                    clearable
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <el-button
                class="commonBut saveBtn funComBut"
                icon="icon iconfont icondaochu"
                @click="exportList"
              >
                <span class="opetareText">导出</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div class="noticeCount">
          <span style="color: #e02020"
            >未处理:{{ alertCount.handleCount }}</span
          >
          <span style="color: #ffc200"
            >处理中:{{ alertCount.handlingCount }}</span
          >
          <span style="color: #5fab2b"
            >已处理:{{ alertCount.handledCount }}</span
          >
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          tooltip-effect="dark"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column prop="projectName" label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="areaDetailDesc"
            label="区域"
            align="center"
            :formatter="formatTd"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="industryName"
            label="行业"
            align="center"
            :formatter="formatTd"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="projectStatusDesc"
            label="开工状态"
            align="center"
            :formatter="formatTd"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="typeName"
            label="预警类型"
            align="left"
            :formatter="formatTd"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.typeName"
                :columnName="'typeName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            label="未处理/处理中/已处理"
            align="center"
            :formatter="formatTd"
            min-width="180"
          >
            <template slot-scope="scope">
              <sapn style="color: #d9001b">{{ scope.row.handle || '0' }}</sapn
              >/
              <sapn style="color: #f59a23">{{ scope.row.handling || '0' }}</sapn
              >/
              <sapn style="color: #70b603">{{ scope.row.handled || '0' }}</sapn
              >/
            </template>
          </el-table-column>

          <el-table-column label="操作" align="left" fixed="right" width="160">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="handleAlert(scope.$index, scope.row, 'detail')"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        ></Pagination>
      </div>
    </div>
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'
import { mapActions, mapState } from 'vuex'
import common from '../../kits/common'
import moment from 'moment'
export default {
  name: 'constructAlertList',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '预警类型',
      dataStr: '',
      advanced: false,
      roleHandle: false, //标识监察还是企业用户登录，false为企业
      //查询条件数据封装
      typeOptions: [],
      //表格数据
      tableList: [],
      requestUrl: 'api-s/cs/alertStats/base/listbyall',
      isShow: false, //列表加载
      loading: true,
      areaId: '',
      filterField: {
        sysAppCode: localStorage.getItem('judgeRoleCode'),
        serverArea: '', // 服务部署区域
        projectName: '',
        typeId: '',
        areaId: '',
        industryId: '', //行业
        projectStatus: '',
      },
      pageSize: 20,
      pageNo: 1,
      loginType: '', //登录类型
      alertCount: {
        handlingCount: 0,
        handledCount: 0,
        handleCount: 0,
      },
    }
  },
  mounted() {
    // this.height = $("#heightBox").height();
    $('.reminder').css({ height: $('#heightBox').css('height') })
    // if (this.roleHandle) {
    //   this.filterField.projectId = this.projectId;
    //   var that = this;
    //   this.$nextTick(function() {
    //     that.$refs.pagination.getTableListData();
    //   });
    // }
    this.getAlertCount()
  },
  computed: {
    ...mapState(['areasOptions', 'industryOptions', 'statusOptions']),
  },
  created() {
    this.filterField.serverArea = this.$store.state.areaInfoArr.areaId
    this.filterField.typeId = this.$route.query.alertType || ''
    this.filterField.projectStatus = this.$route.query.projectStatus || ''
    this.filterField.areaId = this.$route.query.areaId || ''
    this.loginType = localStorage.getItem('loginType')
    //依据登录页逻辑判断登录用户类型
    if (localStorage.length > 0) {
      //判断监察还是企业用户登录
      if (
        localStorage.getItem('loginType') === 'QY' ||
        localStorage.getItem('loginType') === 'XM'
      ) {
        this.roleHandle = false
      } else {
        this.roleHandle = true
      }
    } else {
      this.roleHandle = true
    }
    this.getTypeData('api-bs/base/dicitem/findbytype', {
      type: 'CS_ALERT_TYPE',
    }) //预警类型下拉框
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  computed: {
    ...mapState(['areasOptions', 'industryOptions', 'statusOptions']),
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  methods: {
    getAlertCount() {
      this.axios
        .post('/api-s/cs/alertStats/base/getAlertCount', this.filterField)
        .then((res) => {
          if (!res.data.hasError) {
            this.alertCount = res.data.result
          }
        })
    },
    handleScroll(e) {
      this.$nextTick(function () {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = e.target.scrollTop
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          this.tableHeight = window.innerHeight - 240
          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    ...mapActions(['getAreas', 'getIndustry', 'getStatus']),
    getTypeData(urls, datas) {
      this.axios({
        method: 'post',
        url: urls,
        data: datas,
      })
        .then((resp) => {
          this.typeOptions = resp.data.result
        })
        .catch((resp) => {})
    },
    handleAlert(index, row) {
      this.$router.push({
        path: '/home/project/constructAlertProjectList',
        name: 'constructAlertProjectList',
        query: {
          projectId: row.projectId,
          projectName: row.projectName,
          projectStatus: row.projectStatus,
          alertType: row.typeId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/constructAlertProjectList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
        this.dataStr = '每小时更新,上次更新时间' + moment().format('HH:00:00')
      } else {
        this.dataStr = '每小时更新,上次更新时间' + moment().format('HH:00:00')
      }
    },
    // 搜索
    searchList() {
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData()
      })
      this.getAlertCount()
    },
    exportList() {
      if (this.tableList.length == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning',
        })
      } else {
        window.location.href =
          common.commonApi +
          'api-s/cs/alertStats/base/exportLIst?areaId=' +
          this.filterField.areaId +
          '&projectStatus=' +
          this.filterField.projectStatus +
          '&sysAppCode=' +
          this.filterField.sysAppCode +
          '&serverArea=' +
          this.filterField.serverArea +
          '&projectName=' +
          this.filterField.projectName +
          '&typeId=' +
          this.filterField.typeId +
          '&industryId=' +
          this.filterField.industryId +
          '&access_token=' +
          localStorage.getItem('access_token')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.noticeCount {
  line-height: 20px;
  font-size: 14px;
  padding-bottom: 14px;
  span {
    margin-right: 15px;
  }
}
.tableBoxCur {
  padding-top: 16px;
}
.topCon {
  padding: 0 24px;
}
.topTitle {
  background: #fff;
  padding: 15px 0;
  position: relative;
  h2 {
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    .iconfanhui1 {
      font-size: 20px;
      margin-right: 6px;
      cursor: pointer;
    }
  }
  .dateShow {
    position: absolute;
    top: 12px;
    right: 0;
    width: 290px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #009588;
    text-align: center;
    padding: 0;
  }
}
.mainCon {
  padding-top: 40px;
}
.tipBar {
  margin-top: -24px;
  margin-left: -24px;
  margin-right: -24px;
  height: 67px;
  background-color: #e4ebf1;
  font: bold 18px/67px Microsoft YaHei;
  /deep/.el-input__inner {
    font: bold 24px Microsoft YaHei;
    color: #333333;
    border: none;
    height: 30px;
    background: #e4ebf1;
    margin-top: 18px;
    margin-left: -11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /deep/.el-select__caret {
    color: #333;
    font-size: 20px;
    line-height: 30px;
    margin-top: -1px;
  }
}
.title {
  padding-left: 4px;
  padding-top: 10px;
  margin-bottom: -10px;
  font: bold 18px/50px Microsoft YaHei;
}

.reminderBox {
  padding: 0 24px;
  ul {
    font-size: 0;
    margin-bottom: 36px;
    li {
      // display: inline-block;
      float: left;
      width: 20%;
      position: relative;
      padding: 0 10px;
      height: 100%;
      span {
        display: inline-block;
        text-align: center;
        background: #3c3d49;
        color: #fff;
        height: 22px;
        line-height: 22px;
        width: 22px;
        font-size: 14px;
        border-radius: 50%;
        margin-right: 10px;
        position: absolute;
        top: 50%;
        margin-top: -11px;
        left: 10px;
      }
      // img{
      //   width: calc(100% - 10px);
      //   display: inline-block;
      //   position: absolute;
      //   top: 50%;
      //   margin-top: -10px;
      //   left: 10px;
      //   // right: 50px;
      // }
      div {
        position: absolute;
        left: 40px;
        top: 50%;
        // margin-top: -50%;
        transform: translateY(-50%);
        font-size: 14px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}
.arrowRight {
  text-align: center;
  line-height: 100%;
  background: url('./../../../static/img/icon1.png') center repeat-x;
}
.arrowRight img {
  vertical-align: middle;
  height: 14px;
  width: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -7px;
  margin-left: -5px;
}

.noticeContentRadioBox {
  width: 100%;
  label {
    display: block;
    line-height: 36px;
  }
  /deep/.el-radio__label {
    word-break: break-all;
    white-space: normal;
  }
}
@import '../../../static/css/filterArea.less';
</style>
